<script setup lang="ts" xmlns:all="http://www.w3.org/1999/xhtml">
import {Lock, User} from "@element-plus/icons-vue";
import {useLoginStore} from "@/stores/login";

const {
  isLoading,
  loginFormRef,
  loginFormModel,
  loginFormRules,
  handleSliderVerifySuccess,
  submitLoginForm,
} = useLoginStore()

</script>

<template>
  <el-row min-h-screen class="login-container">
    <el-col :lg="16" class="left-container">
      <div flex select-none all:transition-400 text-center>
        <div ma>
          <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
            Blue Admin
          </div>
          <div op30 text-lg fw300 m1>
            Vue3 + Vite + UnoCSS 即用模板
          </div>
          <div m2 flex justify-center text-2xl op40 hover="op80">
            <el-link href="https://www.github.com/swq2024" target="_blank" :underline="false">
              <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
                <path fill="currentColor" fill-rule="evenodd"
                      d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974c0 4.406 2.857 8.145 6.821 9.465c.499.09.679-.217.679-.481c0-.237-.008-.865-.011-1.696c-2.775.602-3.361-1.338-3.361-1.338c-.452-1.152-1.107-1.459-1.107-1.459c-.905-.619.069-.605.069-.605c1.002.07 1.527 1.028 1.527 1.028c.89 1.524 2.336 1.084 2.902.829c.091-.645.351-1.085.635-1.334c-2.214-.251-4.542-1.107-4.542-4.93c0-1.087.389-1.979 1.024-2.675c-.101-.253-.446-1.268.099-2.64c0 0 .837-.269 2.742 1.021a9.6 9.6 0 0 1 2.496-.336a9.6 9.6 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021c.545 1.372.203 2.387.099 2.64c.64.696 1.024 1.587 1.024 2.675c0 3.833-2.33 4.675-4.552 4.922c.355.308.675.916.675 1.846c0 1.334-.012 2.41-.012 2.737c0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974C22 6.465 17.535 2 12.026 2"
                      clip-rule="evenodd"/>
              </svg>
            </el-link>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :lg="8" class="right-container">
      <div mt6 sm:mx-auto md:max-w-md w-full>
        <h2 mb-3 text-3xl font-bold leading-9 tracking-tight lg:text-4xl>
          欢迎回来 👋🏻
        </h2>
        <p lg:text-md text-sm>
        <span text-gray>
        请输入您的账户以开始管理您的项目
        </span>
        </p>
      </div>
      <div mt6 sm:mx-auto md:max-w-md w-full>
        <el-form ref="loginFormRef" :model="loginFormModel" :rules="loginFormRules"
                 v-on:keydown.enter="submitLoginForm(loginFormRef)">

          <el-form-item label="" prop="username">
            <el-input v-model.trim="loginFormModel.username" placeholder="admin" clearable style="width: 300px;">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <User/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="" prop="password">
            <el-input v-model.trim="loginFormModel.password" type="password" placeholder="admin" show-password
                      style="width: 300px;">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="" prop="verifyStatus">
            <DragVerify @success="handleSliderVerifySuccess"/>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitLoginForm(loginFormRef)" :loading="isLoading" style="width: 300px;"
                       round
                       color="#626aef">登
              录
            </el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-col>
  </el-row>
</template>

<style scoped>
.login-container {
  background-image: url("../../assets/login_bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: top center;
}

.left-container,
.right-container {
  @apply flex justify-center items-center flex-col;
}

.right-container {
  backdrop-filter: blur(2px) brightness(105%);
}
</style>